<template>
  <el-dialog
    title="选择试题"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    width="800px"
    @closed="resetForm()"
  >
    <div class="question-bank">
      <div class="question-bank-left">
        <div class="question-type">
          <ul @click="handleTypeChange">
            <li :class="{ active: listQuery.permission == 1 }" data-type="1"
              >我的题库</li
            >
            <li :class="{ active: listQuery.permission == 2 }" data-type="2"
              >共享题库</li
            >
          </ul>
        </div>
        <div class="question-search">
          <el-input
            v-model="listQuery.name"
            placeholder="请输入关键词"
            @input="getList"
            size="small"
            clearable
          ></el-input>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          row-key="id"
          stripe
          size="mini"
          style="width: 100%"
          max-height="450"
          @selection-change="handleSelectChange"
        >
          <el-table-column type="selection" width="55" reserve-selection>
          </el-table-column>
          <el-table-column prop="name" label="题库名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template slot-scope="{ row }">
              <el-tag v-if="row.status == 1" type="success">正常</el-tag>
              <el-tag v-if="row.status == 2" type="danger">禁用</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="180">
          </el-table-column>
          <div slot="empty" class="emptyBg">
            <el-empty :image-size="200"></el-empty>
          </div>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="custom" v-preventReClick @click="submitForm('form')"
        >提 交</el-button
      >
      <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      listQuery: {
        name: '',
        status: 1,
        permission: 1,
        page: 1,
        limit: 999,
      },
      tableData: [],
      multipleSelection: [],
      questionSelect: [],
    }
  },
  props: ['defaultValue'],
  watch: {
    defaultValue: {
      immediate: true,
      handler(v) {
        this.questionSelect = v
      },
    },
  },
  mounted() {
    this.$bus.$on('showDialogQuestionBankSelect', () => {
      this.listQuery = this.$options.data().listQuery
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('showDialogQuestionBankSelect')
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch(
        'testQuestionBankList',
        this.listQuery,
      )
      this.tableData = res.data
      this.handleSelected()
      this.dialogVisible = true
    },
    handleTypeChange(e) {
      let type = e.target.getAttribute('data-type')
      this.listQuery.permission = type
      this.getList()
    },
    handleSelectChange(v) {
      this.multipleSelection = v
    },
    //数据回显
    handleSelected() {
      let checkedArr = this.myFilter(this.tableData, this.questionSelect)
      if (checkedArr.length) {
        this.$nextTick(() => {
          checkedArr.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row, true)
          })
        })
      }
    },
    submitForm() {
      this.$emit('emit', this.multipleSelection)
      this.dialogVisible = false
    },
    resetForm() {
      this.$refs.multipleTable.clearSelection()
    },
    //过滤数组相同元素
    myFilter(arr1, arr2) {
      return arr1.filter((ele) => arr2.filter((x) => x == ele.id).length > 0)
    },
  },
}
</script>
<style scoped lang="scss">
.question-bank {
  border: 1px solid #eee;
  .question-bank-left {
    padding: 5px;
    width: 100%;
    height: 550px;
    border-right: 1px solid #eee;
    box-sizing: border-box;
    .question-type {
      height: 42px;
      border: 1px solid #eee;
      ul {
        li {
          float: left;
          width: 50%;
          height: 42px;
          line-height: 42px;
          text-align: center;
          cursor: pointer;
          &.active {
            color: #333;
            background: #eee;
          }
        }
      }
    }
    .question-search {
      margin: 10px 0;
    }
  }
}
</style>